<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>遍历函数</title>
	<!--百度jQueryCDN-->
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$(document).ready(function() {
			//each
			$("#btn1").click(function() {
				$("li").each(function(){
					$(this).css("color","red");
				});
			});

			//next
			$("#btn2").click(function() {
				$("li:contains('1')").next().css('color', 'red');
			});

			//prev
			$("#btn3").click(function() {
				$("li:contains('2')").prev().css('color', 'red');
			});

			//children
			$("#btn4").click(function() {
				$("ul").children().css('color', 'red');
			});

			//parent
			$("#btn5").click(function() {
				$("ul").parent().css('background', 'blue');
			});

			//siblings
			$("#btn6").click(function() {
				$("li:contains('3')").siblings().css('color', 'blue');
			});
		});
	</script>
</head>
<body>
	<div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
	<button id="btn1">each</button>
	<button id="btn2">next</button>
	<button id="btn3">prev</button>
	<button id="btn4">children</button>
	<button id="btn5">parent</button>
	<button id="btn6">siblings</button>
</body>
</html>